<!--审核专项督导情况-->
<template>
  <div class="wrapper-container" style="width:100%">
    <div class="search-container" style="margin:0">
      <div class="search-container-item" style="margin-right:20px">
        <span style="color: #004ca7;margin-top: 5px;">状态：</span>
        <el-select v-model="xq" style="width: 100px" size="mini" clearable placeholder="请选择">
          <el-option v-for="item in xqList" :key="item.value" :label="item.xqmc" :value="item.xqmc">
          </el-option>
        </el-select>
      </div>
      <InputItem :name="'督导专家'" :value="teacherName" @input="
        (e) => {
          teacherName = e;
        }
      "></InputItem>

      <div class="search-button" style="margin: 3px 0;">
        <img src="../../../assets/assessment/icon-search.png" alt="" />
        <span @click="selectGroup">查询</span>
      </div>
      <!-- 批量通过 -->
      <div class="add-button" @click="
        $router.push({
          path: '/teacher/appraisal/addSupervisionInformation',
        })
      " style="width: 110px;margin-left: 20px;background: #ffefef;
        border: 1px solid #fa5339;
        border-radius: 6px;
        font-size:14px;
        color: #ff3819;
        margin:3px 20px
        ">
        <!-- <img src="../../../assets/assessment/huankao.png" alt="" /> -->
        <span>批量通过</span>
      </div>
   

    </div>
    <div class="table-container">
      <el-table :data="tableData" style="width: 100%" class="xpaas-table-class" row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class" header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="kcmc" label="督导专家姓名" width="156" align="center">
        </el-table-column>
        <el-table-column prop="skjy" label="任务名称" width="155" align="center">
        </el-table-column>

        <el-table-column prop="skrq" label="被听课人姓名" width="155" align="center">
        </el-table-column>
        <el-table-column prop="tkjc" label="时间" width="155" align="center">
        </el-table-column>
        <el-table-column prop="cd" label="听课节次" width="155" align="center">
        </el-table-column>
        <el-table-column prop="pjdj" label="地点" width="155" align="center">
        </el-table-column>
        <el-table-column prop="pdfs" label="组织单位" width="155" align="center">
        </el-table-column>
        <el-table-column prop="tckr" label="联系人" width="155" align="center">
        </el-table-column>
        <el-table-column prop="tjzt" label="状态" width="155" align="center">
        </el-table-column>
        <el-table-column prop="opreate" width="215" label="操作" align="center">
          <template slot-scope="scope">
            <div class="wrapper-buttons">
              <div class="edit-button">
                <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" />
                <span @click="RouterTo('/teacher/appraisal/addSupervisionInformations', scope.row.id)">编辑</span>
              </div>
              <div class="delet-button" @click="deletGroup(scope.row.id)">
                <img src="../../../assets/assessment/删除.png" style="width: 13px;height: 14px;" alt="" />
                <span>不通过</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="bottom-block">
      <div class="export-button">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <!-- <span>导出Excel</span> -->
        <download-excel class="export-btn" :data="tableData" :fields="jsonFields" type="xls" name="督导信息管理.xls"
          style="color: #f3b815">
          &ensp;导出Excel
        </download-excel>
      </div>
      <div class="pagination-block">
        <el-pagination style="padding:0;margin-top:-8px" @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :current-page.sync="current" :page-sizes="[5, 10, 20, 30]"
          :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="showMessageDialog" width="583px" style=" height:520px"
      class="message-container">
      <div class="message-text">

        <div>确定要删除吗？</div>
      </div>
      <span slot="footer" class="dialog-footer">
        <!--      dialogClickconfirm('Message')  -->
        <button class="green" @click="pjalllerdelete()">确 定</button>
      </span>
      <span slot="footer" class="dialog-footer" style="margin-left:60px">
        <button class="yellow" @click="showMessageDialog = false">取 消</button>
      </span>

    </el-dialog>
  </div>

</template>

<script>
import { selectGroup, deletGroup } from "@/api/teacher/admin";
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import {
  reqGetXqList,

} from "../../../api/classHoursAddList/addList";
export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
  },
  data() {
    return {
      total: "",
      size: 10,
      current: "1",
      showMessageDialog: false,
      xq: "",
      xqList: [],
      teacherName: "",
      className: "",
      courseName: "",
      studentName: "",
      tableData: [],
      jsonFields: {
        督导专家姓名: "kcmc",
        任务名称: "skjy",
        被听课人姓名: "skrq",
        时间: "tkjc",
        听课节次: "cd",
        地点: "pjdj",
        组织单位: "pdfs",
        联系人: "tckr",
        状态: "tjzt",
        操作: "opreate"
      },
      id: '',
    };
  },
  mounted() {
    this.getXqList();
  },
  methods: {
    // 获取学期院历列表
    getXqList() {
      reqGetXqList().then(res => {
        if (res.data.code == 200) {
          this.xqList = res.data.data;
          this.xq = res.data.data.length > 0 ? res.data.data[0].xqmc : '';
          this.selectGroup();
        }
      });
    },
    RouterTo(path, id) {
      console.log("================" + id)
      this.$router.push({
        path: path,
        query: {
          id: id
        }
      })
    },
    //按条件查询
    selectGroup() {
      console.log(this.xq)
      let obj = {}
      obj.supervisionInfoVO = {
        term: this.xq,
        skjy: this.teacherName,
        kcmc: this.courseName,
        tckr: this.studentName
      },
        obj.query = {
          size: this.size,
          current: this.current
        }
      return new Promise(resolve => {
        selectGroup(obj).then((res) => {
          this.tableData = res.data.data.records
          this.total = res.data.data.total
        })
      })
    },
    handleCurrentChange(val) {
      this.current = val;
      this.selectGroup();
    },
    handleSizeChange(val) {
      this.size = val;
      this.selectGroup();
    },
    deletGroup(id) {
      this.id = id;
      this.showMessageDialog = true;
    },
    pjalllerdelete() {
      deletGroup(this.id).then(res => {
        if (res.data.code == 200) {
          this.showMessageDialog = false;
          this.selectGroup();
        }
      })
    }
  },
};
</script>
<style lang="less" scoped>
@fontFamily: "Microsoft YaHei";

.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;

  // margin: 15px 0;
  > ::v-deep div.el-table__header-wrapper {
    >table.el-table__header {
      >thead {
        >tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;

          >th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;

            >div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }

  > ::v-deep div.el-table__body-wrapper {
    >table.el-table__body {
      >tbody {
        >tr.xpaas-row-class {
          >td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;

            >div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }

          >td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;

            >div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}

.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .export-button {
    width: 127px;
    height: 27px;
    background: #fff6ef;
    border: 1px solid #f3b815;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 14px;

    >img {
      width: 17px;
      height: 17px;
    }

    >span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }
  }

  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}

.pagination-block {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.search-container {
  justify-content: flex-start !important;
}

.search-button {
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  >span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  >img {
    width: 17px;
    height: 17px;
    margin-right: 4px;
  }
}

.edit-button {
  .search-button;
  background: #dfffef;
  border: 1px solid #02c86c;

  >span {
    color: #02c86c;
  }
}

.delet-button {
  .search-button;
  background: #ffefef;
  border: 1px solid #ff3819;

  >span {
    color: #fb563c;
  }
}

.table-container {
  margin-top: 15px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-buttons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    >div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";

.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}

.table-container {
  margin-top: 15px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.message-container {
  >div {
    display: inline-block;

    &:nth-child(1) {
      padding-left: 111px;
      font-size: 20px;
      color: rgba(0, 76, 167, 1);
      font-weight: bold;
      vertical-align: top;
    }

    &:nth-child(2) {}
  }
}

.message-text {
  padding: 57px 0 63px 0;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 20px;
  color: #004ca7;
  text-align: center;
}
</style>
